<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>图书管理</title>
  <style>
    h1 {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      text-transform: uppercase;
    }

    h2 {
      text-align: center;
    }

    table,
    th,
    td {
      border-collapse: collapse;
      border-spacing: 0;
    }

    table {
      width: 600px;
      margin: 0 auto;
      text-align: center;
    }

    th,
    td {
      border: 1px solid #bcbcbc;
      padding: 5px 10px;
    }

    th {
      background: #42b983;
      font-size: 1.2rem;
      font-weight: 400;
      color: #fff;
      cursor: pointer;
    }

    tr:nth-of-type(even) {
      background: #ddd;
    }

    .add {
      width: 400px;
      padding: 10px 50px;
      margin: 10px auto;
      background: #ccc;
      border-radius: 5px;
    }

    p,
    input {
      height: 30px;
      line-height: 30px;
    }

    input {
      width: 300px;
      font-size: 20px;
      padding-left: 10px;
    }

    button {
      background: #42b983;
      border: none;
      cursor: pointer;
    }

    p button {
      float: right;
      width: 100px;
      height: 40px;
      line-height: 40px;
      font-size: 20px;
      border: none;
      border-radius: 5px;
    }

    td button {
      border-radius: 3px;
    }
  </style>
</head>

<body>
  <h1>图书管理</h1>

  <div id="app">
    <h2>图书管理系统</h2>
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>书名</th>
          <th>作者</th>
          <th>价格</th>
          <th>标签</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- <tr>
          <td>1</td>
          <td>西游记</td>
          <td>吴承恩</td>
          <td>999</td>
          <td>名著</td>
          <td>
            <button>删除</button>
          </td>
        </tr> -->
      </tbody>
    </table>
    <div class="add">
      <h2>添加新书</h2>
      <div class="form-group">
        <p>书名：<input name="name" type="text" /></p>
        <p>作者：<input name="author" type="text" /></p>
        <p>价格：<input name="price" type="text" /></p>
        <p>标签：<input name="tag" type="text" /></p>
        <p>
          <button>添加</button>
        </p>
      </div>
    </div>
  </div>

  <script>
    alert('本地存储版本')
    // 需要渲染的数据数组
    let list = [
      {
        id: 1,
        name: '《三国演义》',
        author: '罗贯中',
        price: '99.99',
        tag: '经典',
      },
      {
        id: 2,
        name: '《红楼梦》',
        author: '曹雪芹',
        price: '88',
        tag: '推荐',
      },
      {
        id: 3,
        name: '《水浒传》',
        author: '施耐庵',
        price: '77',
        tag: '热销',
      },
      {
        id: 4,
        name: '《西游记》',
        author: '吴承恩',
        price: '60',
        tag: '经典',
      },
    ]
    list = localStorage.getItem('booksDataZP') ? JSON.parse(localStorage.getItem('booksDataZP')) : list
    localStorage.setItem('booksDataZP', JSON.stringify(list))
    const btn = document.querySelector('.form-group button')
    const inputlist = document.querySelectorAll('.form-group input[name]')
    const tbody = document.querySelector('tbody')
    console.log(inputlist)
    btn.addEventListener('click', () => {
      const obj = new Object()
      for (const item of inputlist) {
        if ((!item.value)) return alert('内容都不输入完整，存个毛')
        obj[item.name] = item.value
        item.value = ''
      }
      obj.id = list[list.length - 1] ? list[list.length - 1].id + 1 : 1
      list.push(obj)
      localStorage.setItem('booksDataZP', JSON.stringify(list))
      renderer()
    })
    const renderer = () => {
      list = JSON.parse(localStorage.getItem('booksDataZP'))
      const newArr = list.map((item, index) => {
        return `
        <tr>
          <td>${item.id}</td>
          <td>${item.name}</td>
          <td>${item.author}</td>
          <td>${item.price}</td>
          <td>${item.tag}</td>
          <td>
            <button data-id=${index}>删除</button>
          </td>
        </tr>
        `
      })
      tbody.innerHTML = newArr.join('')
    }
    tbody.addEventListener('click', (e) => {
      if (e.target.tagName === 'BUTTON') {
        list.splice(e.target.dataset.id, 1)
        localStorage.setItem('booksDataZP', JSON.stringify(list))
        renderer()
      }
    })
    renderer()
  </script>
</body>

</html>